<template>
  <div>
    <page-header></page-header>

    <div class="page-body">
      <div class="page-body1">
        <page-side></page-side>
      </div>
      <div class="page-body2">
        <div>
          <div class="swipe">
            <el-carousel :interval="6000" type="card" height="300px">
              <el-carousel-item v-for="(item,index) in imglist" :key="index">
                <img class="top-img" :src="item.imgurl">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <!-- 求购信息 -->
        <div>
             <div class="wantbuy" v-for="(item,index) in WantListData" :key="index">
            <div class="wantbuy_left">
              <img class="wbl_img" src="/static/shopcard/6.jpg">
              <div class="wbl_name">发布人:admin</div>
            </div>
            <div class="wantbuy_right">
              <div class="wbr_title wbr_titles">{{ item.title}}</div>
              <div class="wbr_content">
                <div class="wbr_title_detail">具体描述：</div>
                <div class="wbr_contents">{{item.describe}}</div>
              </div>
              <div class="wbr_title">
                期待价格：
                <span class="wbr_price">￥{{item.price}}</span>
              </div>
              <div class="wbr_title">
                联系方式：
                <span class="wbr_phone">电话:{{item.mobile}}</span>
                <span class="wbr_phone">QQ:{{item.qq}}</span>
                <span class="wbr_phone">微信:{{item.wechat}}</span>
              </div>
              <div class="wbr_title">
                发布时间：
                <span class="wbr_phone">2019-05-20</span>
              </div>
              <div class="wbr_title">
                发布地点：
                <span class="wbr_phone">{{item.address}}</span>
              </div>
            </div>
          </div>


          <!-- 分割线 -->
        </div>

        <!-- 分页 -->
        <div class="paging_page">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
               :page-sizes="[100, 200, 300, 400]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            ></el-pagination>
          </div>
        </div>
        <!-- 页脚 -->
        <page-footer></page-footer>
      </div>

      <!-- <div class="page-body3">123456</div> -->
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/pages/pageheader'
import PageSide from '@/components/pages/PageSide'
import PageContent from '@/components/pages/PageContent'
import PageFooter from '@/components/pages/PageFooter'
import remote from '@/utils/http'
export default {
  name: 'CampusWantBuy',
  components: { PageHeader, PageSide, PageContent, PageFooter },
  data () {
    return {
      currentPage: 1, // 当前页数
      imglist: [
        { id: 1, imgurl: '/static/second/1.jpg' },
        { id: 2, imgurl: '/static/second/2.jpg' },
        { id: 3, imgurl: '/static/second/3.jpg' },
        { id: 4, imgurl: '/static/second/4.jpg' },
        { id: 5, imgurl: '/static/second/5.jpg' },
        { id: 6, imgurl: '/static/second/6.jpg' },
        { id: 7, imgurl: '/static/second/3.jpg' }
      ],
      WantListData: []
    }
  },
  computed: {
  },
  created () {
    this.getWantList()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    //  求购数据信息
    getWantList () {
      let that = this
      remote('wantBuyList', false, {}).then(res => {
        console.log('123456')
        if (res.code === 0) {
          this.WantListData = res.date.map(item => {
            return {
              id: item.id,
              title: item.title,
              price: item.price,
              describe: item.describe,
              qq: item.qq,
              wechat: item.wechat,
              address: item.address,
              mobile: item.mobile,
              time: item.time
            }
          })
          console.log(this.WantListData, '商品列表数据')
        } else {
          that.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.page-body {
  padding-top: 80px;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  width: 98%;
}
.page-body1 {
  width: 13%;
  display: block;
  overflow: auto;
}
.page-body2 {
  width: 87%;
}
/* ----------------------------轮播-------------------------------------- */
.swipe {
  margin: 20px 0;
  padding: 0 20px;
  border: 2px solid #1296db;
}
.top-img {
  width: 100%;
}
/* ------------------------求购信息------------------------------------ */
.wantbuy {
  display: flex;
  border: 2px solid #1296db;
  padding: 15px 40px;
  margin-bottom: 10px;
}
.wantbuy_left {
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wbl_img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.wbl_name {
  padding-top: 10px;
  font-size: 14px;
}
.wantbuy_right {
  width: 80%;
  font-size: 14px;
  color: #fe7e4f;
}
.wbr_price {
  color: red;
  font-size: 17px;
  padding-left: 5px;
}
.wbr_title {
  font-size: 15px;
  font-weight: bold;
  color: #1296db;
  padding-bottom: 5px;
}
.wbr_titles {
  color: #98e165;
  font-size: 20px;
}
.wbr_phone {
  padding: 0 8px;
  font-weight: normal;
  color: #fe7e4f;
}
.wbr_content {
  display: flex;
  justify-content: flex-start;
}
.wbr_title_detail {
  width: 9%;
  font-size: 15px;
  font-weight: bold;
  color: #1296db;
  padding-bottom: 5px;
}
.wbr_contents {
  width: 80%;
}
/* --------------------分页-------------------------------- */
.paging_page {
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
